<template>
    <view class="article-box">
        <view v-for='(pItem, pIndex) in article' :key="pIndex" :id='getItemId(pItem)' :class="[getItemClass(pItem)]"
            @click="tapItem(pItem)">
            <template v-if='pItem.content'>
                {{getItemWord(pItem)}}
            </template>
            <template v-else>
                <text v-for='(sItem, sIndex) in pItem.childs' :key="sIndex" :id='getItemId(sItem)'
                    :class="[getItemClass(sItem)]" @click.stop='tapItem(sItem)'>
                    {{getItemWord(sItem)}}
                </text>
            </template>
        </view>
    </view>
</template>

<script>
    export default {
        props: {
            article: {
                type: Array,
                default: function() {
                    return []
                }
            },
            lightPointWord: {
                type: Boolean,
                default: true
            },
            hidePointWord: {
                type: Boolean,
                default: false
            },
            currentIndex: {
                type: Number,
                default: -1
            }
        },
        methods: {
            selectedKeyParagraphNode(callback) {
                const query = uni.createSelectorQuery().in(this);
                query.select("#key-paragraph").boundingClientRect(res => {
                    typeof callback == 'function' && callback(res);
                }).exec();
            },
            tapItem(item) {
                this.$emit("tapItem", {
                    item
                })
            },
            getItemId(item) {
                let tagList = item.tag.split(" ");
                let result = "";
                if (tagList.indexOf("key-paragraph") != -1) {
                    result = `key-paragraph`;
                }
                return result;
            },
            getItemClass(item) {
                let result = item.tag.split(" ");
                if (result.indexOf("h1") != -1 || result.indexOf("p") != -1) {
                    result.push("section");
                } else if (result.indexOf("point") != -1) {
                    if (!this.lightPointWord) {
                        result.push("hide-point")
                    }
                    if (this.hidePointWord) {
                        result.push("underline")
                    }
                }
                if (this.currentIndex != -1 && item.index != undefined) {
                    if (this.currentIndex == item.index) {
                        result.push("current")
                    } else if (this.currentIndex >= item.index) {
                        result.push("pass")
                    } else {
                        result.push("unpass")
                    }
                }
                return result;
            },
            getItemWord(item) {
                let tags = item.tag.split(" ");
                if (tags.indexOf("point") != -1) {
                    if (this.hidePointWord) {
                        return "&emsp;";
                        let result = [];
                        for (let wordIndex = 0; wordIndex < item.content.length; wordIndex++) {
                            result.push('.')
                        }
                        return result.join("");
                    }
                }
                return item.content;
            }
        }
    }
</script>

<style lang="scss" scoped>
    .article-box {
        --h1_font_size: 40rpx;
        --p_font_size: 36rpx;
        --text_font_size: 36rpx;
        --point_font_size: 36rpx;

        --h1_color: #333;
        --p_color: #333;
        --text_color: #333;
        --point_color: #9470e0;

        --p_key_background: #FECF02;

        word-wrap: break-word;
        word-break: break-word;

        .h1 {
            font-size: var(--h1_font_size);
            color: var(--h1_color);
            font-weight: 800;
        }

        .p {
            font-size: var(--p_font_size);
            color: var(--p_color);
            text-indent: 2em;
        }

        .key-paragraph {
            background: var(--p_key_background);
            font-weight: 800;
        }

        .section {
            margin: 0 15rpx 30rpx;
            margin-top: 0;
            display: inline-block;
            line-height: 1.7em;
        }

        .text {
            font-size: var(--text_font_size);
            color: var(--text_color);
            font-weight: 400;
        }

        .point {
            font-size: var(--point_font_size);
            color: var(--point_color);
            font-weight: 700;
        }

        .hide-point {
            font-size: var(--text_font_size);
            color: var(--text_color);
            font-weight: 400;
        }

        .underline {
            text-decoration: underline;
            color: transparent;
            border-bottom: 4rpx solid #9470e0;
            margin: 0 0.2em;
        }

        .current {
            font-weight: 800;
            color: #333;
        }

        .pass {
            font-weight: 800;
            color: #ff2525;
        }

        .unpass {
            font-weight: 500;
            color: #999;
        }
    }
</style>